<template>
	<view class="container flex flex-x-center flex-y-center">
		<view class="cardBg p-10px rounded-10px">
			<view class="avatar mt-60px flex flex-y flex-y-center">
				<uv-avatar :src="state?.avatarUrl" :size="60"></uv-avatar>
				<text class="mt-20px">{{state?.userName || '-'}}</text>
			</view>
			<view class="h-350px pt-100px pb-50px mt-40px bg-white rounded-20px relative">
				<view class="time absolute rounded-10px text-center text-24px leading-50px">
					{{nowTime}}
				</view>

				<view class="text-center">
					支付金额
					<view class="color-pink">
						￥ <text class="text-60px">{{state?.price}}</text>元
					</view>
				</view>

				<view class="flex flex-x-center">
					<uv-line margin="20rpx 0" length="90%"></uv-line>
				</view>

				<view class="px-40px text-24px leading-100px">
					<view class="flex flex-y-center">交易单号：
						<!-- <uv-text mode="phone" :call="false" :text="state?.transactionNo" format="encrypt"></uv-text> -->
						<!--张*三-->
						{{state?.transactionNo ||'-'}}
					</view>
					<view class="flex flex-y-center">商户单号：
						<!-- <uv-text mode="phone" :call="false" text="4023421241241451241124" format="encrypt"></uv-text> -->
						<!--张*三-->
						{{state?.no ||'-'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app";

	const state = ref()
	onLoad((option) => {
		if (option?.data) {
			state.value = JSON.parse(option.data)
		}
		console.log('晒单', state.value);
	})

	const nowTime = computed(() => {
		return uni.$uv.date(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss')
	})
</script>

<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.container {
		height: 90vh;
	}

	.cardBg {
		width: 85vw;
		height: 800rpx;
		background: url(https://i.postimg.cc/hGX39tty/Nipic-33460325-20231031085128282.jpg);
	}

	.time {
		width: 300rpx;
		height: 50rpx;
		left: calc(50% - 150rpx);
		top: -25rpx;
		background: #dedede;
	}
</style>